<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit" />
<title>sdEditor富文本编辑器 - 轻量级web富文本编辑器 - 移动端富文本编辑器 - 可视化Html网页编辑器</title>
<meta name="keywords" content="sdEditor,富文本编辑器,开源html编辑器,可视化html编辑器,移动端富文本编辑器">
<meta name="description" content="sdEditor是一款基于Jquery开发的轻量化、所见即所得的web富文本编辑器，体积小、安全性高、同时支持一个页面多次调用，支持移动端自适应使用。有效过滤XSS攻击，不破坏Html结构。">
<link rel="stylesheet" href="public/css/ui.css">
<link rel="stylesheet" href="public/css/style.css">
<script src="public/js/jquery.js"></script>
<script src="editor/editor.js"></script>
</head>

<body>
	    
	<h1>sdEditor富文本编辑器</h1>
    <div class="ui-demo">
        <div class="ui-tabs ui-tabs-white" data-href="1">
            <ul class="ui-tabs-nav">
            	<li><a href="./">调用方式</a></li>
                <li><a href="./param.html">可选参数</a></li>
                <li><a href="./mode.html">模式演示</a></li>
                <li><a href="./toolbar.html">自定义工具条</a></li>
                <li><a href="./btn.html">自定义按钮</a></li>
                <li class="active"><a href="./upload.html">上传演示</a></li>
                <li><a href="./api.html">接口交互</a></li>
            </ul>
            <div class="ui-tabs-content">
                <div class="ui-tabs-pane active">
                    <!---->
                    
                    <div class="ui-menu ui-menu-blue ui-mb-30"><div class="ui-menu-name">上传演示</div></div>
                    
                    <div id="content"><h3>操作提示</h3><pre>点击图片或上传按钮，均可测试上传，支持自动保存截图粘贴的图片。</pre></div>
                    
                    <div class="ui-menu ui-menu-red ui-mt-30 ui-mb-30"><div class="ui-menu-name">接口说明</div></div>
                    <div class="ui-line ui-line-left"><span>默认仅提供<em class="ui-text-red">Php</em>语言接口范例，如果您使用其他语言开发，请按下面说明处理：</span></div>
                    
                    <div class="ui-timeline">
                        <div class="ui-timeline-item">
                            <div class="ui-timeline-dot"></div>
                            <div class="ui-timeline-title">上传元素名称</div>
                            <div class="ui-timeline-text">
                            	上传input名称默认为：<span class="ui-text-red">file</span>，可以通过<span class="ui-text-red">file</span>参数自行修改为其他字符，比如：<span class="ui-text-red">file:'test'</span>，那么上传接口里就根据<span class="ui-text-red">test</span>来获取数据（如：$_FILES['test'];）
                            </div>
                        </div>
                        <div class="ui-timeline-item">
                            <div class="ui-timeline-dot"></div>
                            <div class="ui-timeline-title">自定义参数传递</div>
                            <div class="ui-timeline-text">
                            	sdEditor支持自定义参数传递，比如传递token，我们可以通过<span class="ui-text-red">params</span>参数传递，如：params:{token:"1234"}
                            </div>
                        </div>
                        <div class="ui-timeline-item">
                            <div class="ui-timeline-dot"></div>
                            <div class="ui-timeline-title">数据返回要求</div>
                            <div class="ui-timeline-text">
                            	<ul class="ui-list">
                            		<li><div>数据格式：<span class="ui-text-red">Json</span></div></li>
                                	<li><div>成功结果：{state:'success',msg:'/upload/1.jpg',name:'源文件名称'}</div></li>
                                	<li><div>失败结果：{state:'fail',msg:'上传失败的原因'}</div></li>
                                </ul>
                            </div>
                        </div>
                        <div class="ui-timeline-item">
                            <div class="ui-timeline-dot"></div>
                            <div class="ui-timeline-title">其他说明</div>
                            <div class="ui-timeline-text">
                            	在文件上传接口中，我们会根据使用的功能不同，传递不同的action参数给接口（<span class="ui-text-red">GET</span>方式传递），具体为：
                                <ul class="ui-list">
                            		<li><div>当action==image：<span class="ui-text-red">表示插入图片接口</span></div></li>
                                	<li><div>当action==music：<span class="ui-text-red">表示插入音乐接口</span></div></li>
                                    <li><div>当action==video：<span class="ui-text-red">表示插入视频接口</span></div></li>
                                    <li><div>当action==all：<span class="ui-text-red">为所有类型文件</span></div></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!---->
                </div>
            </div>
        </div>
    </div>

    <script>
	$(function()
	{
		/*upload参数为上传接口，save参数为保存远程图片接口*/
		$("#content").editor({upload:'api/upload.php',save:'api/save.php'});
		
		/*以下和调用无关*/
		var isMobile=navigator.userAgent.toLowerCase().match(/(iPhone|Android|mobile)/i)?true:false;
		if(isMobile)
		{
			var index=$(".ui-tabs ul").find("li.active").index();
			if(index>2)
			{
				$(".ui-tabs .ui-tabs-nav").scrollLeft((index*90));
			}
		}
	})
	</script>

</body>
</html>